<div class="user_management">
    <div nz-row nzGutter="16" class="row_1">
        <div nz-col nzSpan="4">
            <nz-input-group [nzPrefix]="prefixIconSearch">
                <input type="text" nz-input placeholder="输入部门名称搜索" [(ngModel)]="departValue"
                    (ngModelChange)="fillDepart($event)" />
            </nz-input-group>
            <ng-template #prefixIconSearch>
                <i nz-icon nzType="search"></i>
            </ng-template>
        </div>
        <div nz-col nzSpan="9" class="operate_btn" style="margin-top: 0;">
            <button nz-button nzType="primary" (click)="showModal(1)" *ngIf="bornRoles.add">
                <i nz-icon nzType="plus"></i>新增
            </button>
            <button nz-button nzType="" (click)="showModal(2)" [disabled]="deleteMember.length !== 1"
                [class]="deleteMember.length !== 1?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"
                *ngIf="bornRoles.edit">
                <i nz-icon nzType="edit"></i>修改
            </button>
            <button nz-button nzType="" [disabled]="deleteMember.length === 0" (click)="deleteMemberFn()"
                [class]="deleteMember.length === 0?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"
                *ngIf="bornRoles.del">
                <i nz-icon nzType="delete"></i>删除
            </button>
            <button nz-button nzType="" (click)="downloadList()">
                <i nz-icon nzType="download"></i>导出
            </button>
        </div>
        <div nz-col nzSpan="2"></div>
        <div nz-col nzSpan="4">
            <nz-range-picker nzDropdownClassName="date-range" ngModel (ngModelChange)="onDateChange($event)"></nz-range-picker>
        </div>
        <div nz-col nzSpan="3">
            <input appHotSearch (hotSearchEmit)="getMember()" nz-input placeholder="输入名称或者邮箱搜索"
                [(ngModel)]="searchValue" />
        </div>
        <div nz-col nzSpan="2" ref="aaa">
            <nz-select getContainer="()=>$refs.aaa" [(ngModel)]="statusValue" class="select_status" nzDropdownClassName="select_custom" (ngModelChange)="selectStatus($event)">
                <nz-option nzValue="" nzLabel="全部"></nz-option>
                <nz-option [nzValue]="true" nzLabel="启用"></nz-option>
                <nz-option [nzValue]="false" nzLabel="禁用"></nz-option>
            </nz-select>
            <!-- <select class="select_status" ng-model="statusValue">
                <option [value]="true">激活</option>
                <option [value]="false">禁用</option>
            </select> -->
        </div>
    </div>
    <div nz-row nzGutter="16" class="row_2">
        <div nz-col nzSpan="4">
            <nz-tree [nzData]="nodes" nzBlockNode (nzClick)="clickDepart($event)"></nz-tree>
        </div>
        <div nz-col nzSpan="20">
            <div nz-row class="user_table">
                <nz-table #rowSelectionTable [nzData]="listOfAllData" nzSize="small" [nzFrontPagination]="false">
                    <thead>
                        <tr>
                            <th nzShowCheckbox [(nzChecked)]="isCheckAll" [nzIndeterminate]="isIndeterminate"
                                (nzCheckedChange)="checkAll($event)"></th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <!-- <th>电话</th>
                            <th>邮箱</th> -->
                            <th>所属角色</th>
                            <th>部门/岗位</th>
                            <th>状态</th>
                            <th>创建日期</th>
                            <!-- <th>操作</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of rowSelectionTable.data">
                            <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]"
                                (nzCheckedChange)="refreshStatus()"></td>
                            <td>{{ data.username}}</td>
                            <td>{{ data.nickName }}</td>
                            <td>{{ data.sex }}</td>
                            <!-- <td>{{ data.phone }}</td>
                            <td>{{ data.email }}</td> -->
                            <td>{{data.roleStr}}</td>
                            <td>{{ data.deptName }}</td>
                            <td>
                                <nz-switch [disabled]="!bornRoles.edit" [(ngModel)]="data.enabled"
                                    (ngModelChange)="switchChange(data)"></nz-switch>
                            </td>
                            <td>{{ data.createTime }}</td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
            <div nz-row class="row_4" *ngIf="listOfAllData.length!=0">
                <nz-pagination (nzPageIndexChange)="clickPage($event)" [nzPageIndex]="pageIndex" [nzTotal]="totalSize"
                    [nzPageSize]="pagesize" [nzShowTotal]="totalTemplate"></nz-pagination>
                <ng-template #totalTemplate let-total> 总共 {{totalSize}} 条 </ng-template>
            </div>
        </div>
    </div>
</div>
<div id="modal_box"></div>
<nz-modal nzMaskClosable="false" appDragModal [(nzVisible)]="isVisible" [nzGetContainer]="modalDomBox" [nzTitle]="editId==-1?'新增用户':'编辑用户'" (nzOnCancel)="handleCancel()" [nzFooter]="null"
    class="hmodal">
    <form nz-form [formGroup]="userForm" (ngSubmit)="submitFn()">
        <div nz-row>
            <div nz-col nzSpan="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="8" nzRequired>用户名</nz-form-label>
                    <nz-form-control [nzSpan]="16" nzErrorTip="请输入工号">
                        <input placeholder="请输入工号" nz-input formControlName="username">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col nzSpan="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="8">密码</nz-form-label>
                    <nz-form-control [nzSpan]="16">
                        <input type="password" placeholder="请输入密码" nz-input formControlName="userPassword">
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="8">姓名</nz-form-label>
                    <nz-form-control [nzSpan]="16" nzErrorTip="请输入姓名">
                        <input placeholder="请输入姓名" nz-input formControlName="nickName">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col nzSpan="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="8">电话</nz-form-label>
                    <nz-form-control [nzSpan]="16" [nzErrorTip]="phoneErrorTpl">
                        <input placeholder="请输入电话" nz-input formControlName="phone">
                        <ng-template #phoneErrorTpl let-control>
                            <!-- <ng-container *ngIf="control.hasError('required')">请输入电话</ng-container> -->
                            <ng-container *ngIf="control.hasError('phone')">请输入正确的电话</ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="24">
                <nz-form-item>
                    <nz-form-label [nzSpan]="4">邮箱</nz-form-label>
                    <nz-form-control [nzSpan]="20" [nzErrorTip]="emailErrorTpl">
                        <input placeholder="请输入邮箱" nz-input formControlName="email">
                        <ng-template #emailErrorTpl let-control>
                            <!-- <ng-container *ngIf="control.hasError('required')">请输邮箱</ng-container> -->
                            <ng-container *ngIf="control.hasError('email')">请输入正确的邮箱</ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>部门</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请选择部门">
                <nz-tree-select style="width: 100%" [nzNodes]="nodes" nzPlaceHolder="请选择部门" [nzDropdownStyle]="{left : '-200px'}"
                    formControlName="deptId" (click)="getNodes()">
                </nz-tree-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>角色</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请选择角色">
                <!-- <nz-select class="select_term" [nzAllowClear]="true" formControlName="rolesId" nzDropdownClassName="select_custom">
                    <nz-option nzValue="" nzLabel="请选择"></nz-option>
                    <nz-option *ngFor="let role of roleList" [nzValue]="role.id" [nzLabel]="role.name"></nz-option>
                </nz-select> -->
                <nz-select [nzMode]="'multiple'" nzPlaceHolder="请选择" formControlName="rolesId" nzDropdownClassName="select_custom">
                    <nz-option *ngFor="let item of roleList" [nzLabel]="item.name" [nzValue]="item.id">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <div nz-row>
            <div nz-col nzSpan="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="8">性别</nz-form-label>
                    <nz-form-control [nzSpan]="16">
                        <nz-radio-group formControlName="sex">
                            <label nz-radio nzValue="男">男</label>
                            <label nz-radio nzValue="女">女</label>
                        </nz-radio-group>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col nzSpan="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="8">状态</nz-form-label>
                    <nz-form-control [nzSpan]="16">
                        <nz-radio-group formControlName="enabled">
                            <label nz-radio [nzValue]="true">启用</label>
                            <label nz-radio [nzValue]="false">禁用</label>
                        </nz-radio-group>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isOkLoading">确定</button>
            </div>
        </div>
    </form>
</nz-modal>
